import { Button, Card, Form, Input, Flex, notification } from "antd";
import { Typography } from "antd";
import { login as loginApi } from "../../request/login";
import to from "await-to-js";
import { useNavigate } from "react-router-dom";
// 字体排版
const { Title } = Typography;
const Login = () => {
  const [api, contextHolder] = notification.useNotification();
  // 路由跳转
  const navigateTo = useNavigate();
  // 登录按钮
  const onFinish = async (val) => {
    const [err, res] = await to(loginApi(val));
    if (!err) {
      localStorage.setItem("token", res[0].mockToken);
      api["success"]({
        message: "登陆成功",
        description: err,
      });
      navigateTo("/todoList");
    } else {
      api["error"]({
        message: "提示信息",
        description: err,
      });
    }
  };
  return (
    <>
      {contextHolder}
      <Card style={{ width: 500 }} className="m-auto mt-200px p-0">
        <Flex gap="middle" align="center" vertical>
          <Title level={3} className="mb-40px">
            TODOLIST演示
          </Title>
          <Form
            name="login"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            onFinish={onFinish}
            autoComplete="off">
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入账号!",
                },
              ]}>
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码！",
                },
              ]}>
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Flex>
      </Card>
    </>
  );
};

export default Login;
